<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted, computed } from 'vue'
import { getChapterDraftList, getDetailChapter, publishDraft } from '@/api/book/index.js'
import { message } from 'ant-design-vue';

let dataSource = ref([])
let loading = ref(false)
const draftState = ref({
  content: '',
  title: '',
  preVisible: false
})
const route = useRoute()
const router = useRouter()
onMounted(() => {
  loadData({ id: route.query.novelId })
})
const handleEdit = ({ id, chapterNo }) => {
  router.push({ path: '/book/chapter/upload', query: { ...route.query, chapter: chapterNo,  cid: id } })
}
// 预览小说章节内容
const handlePreview = ({ id }) => {
  getDetailChapter({ id })
    .then(res => {
      draftState.value.content = res.chapterContentHtml
      draftState.value.title = res.chapterName
      draftState.value.preVisible = true,
      draftState.value.chapterNo = res.chapterNo
    })  
}
const columns = [
  {
    title: '章节名称',
    dataIndex: 'chapterName'
  },
  {
    title: '字数',
    dataIndex: 'wordNums',
    align: 'center'
  },
  {
    title: '章节号',
    dataIndex: 'chapterNo',
    align: 'center'
  },
  {
    title: '发布时间',
    dataIndex: 'createdTime',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    slots: {
      customRender: 'action',
    },
    align: 'center'
  }
]
const loadData = (params) => {
  loading.value = true
  getChapterDraftList(params)
  .then(res => {
    dataSource.value = res || []
    loading.value = false
  })
  .finally(() => {
    loading.value = false
  })
}
// 立即发布
const handlePublish = (record) => {
  publishDraft({ id: record.id }).then(() => {
    loadData({ id: route.query.novelId })
    message.success('发布成功')
  }).catch(err => {
    message.error(err || '发布失败')
  })
}
const modalTitle = computed(() => `第${draftState.value.chapterNo}章`+draftState.value.title)
</script>
<template>
<div class="draft">
  <a-table 
    :dataSource="dataSource"  
    :columns="columns" 
    :loading="loading"
    :rowKey="record => record.id" 
  >
    <template #action="{ record }">
      <a-button type="link" @click="() => handlePreview(record)">预览</a-button>
      <a-button  type="link" @click="() => handleEdit(record)">编辑</a-button>
      <a-button  type="link" @click="() => handlePublish(record)">立即发布</a-button>
    </template>
  </a-table>
  <a-modal width="960px" v-model:visible="draftState.preVisible" :footer="null" :title="draftState.chapterName" >
    <template #title>
      <div class="gloabal-title-draft" style="">{{ modalTitle }}</div>
    </template>
    <div v-html="draftState.content" class="gloabal-content-draft"></div>
  </a-modal>
</div>
</template>
<style lang="less" scoped>
.draft {
  .ant-modal-content {
    width: 960px;
  }
  .title {
    text-align: center;
    font-size: 16px;
  }
}

</style>
<style lang="less">

  .gloabal-content-draft {
    p {
      text-indent: 2em;
      padding-top: 26px;
      font-size: 18px;
      margin-bottom: 0;
    }
  }
  .gloabal-title-draft {
    text-align: center; 
    font-size: 24px;
    color: #222;
  }
</style>